.container {
  width: 100%;
  min-height: 40px;
  border-left: 3.5px solid transparent;
  padding: 9px 10px 9px 20px;
  display: flex;
  flex-direction: column;
  position: relative;
  &:hover {
    background-color: var(--td-brand-color-light);
  }
  &:hover::after {
    border-bottom: none;
  }
  &::after {
    content: '';
    width: calc(100% - 50px - 10px);
    position: absolute;
    right: 10px;
    bottom: 0;
    border-bottom: 1px solid var(--td-bg-color-secondarycontainer);
  }
  .main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 22px;
    .tag {
      position: relative;
      &:hover .removeTagBtn {
        display: flex;
      }
      .removeTagBtn {
        position: absolute;
        top: -4px;
        right: -3px;
        height: 9px;
        width: 9px;
        display: none;
        justify-content: center;
        align-items: center;
        text-align: center;
        border-radius: 50%;
        background-color: var(--td-text-color-placeholder);
        cursor: pointer;
        > div {
          width: 100%;
          height: 100%;
          position: relative;
          > div {
            position: absolute;
            width: 6px;
            border-bottom: 1.5px solid var(--td-bg-color-container);
            left: 50%;
            top: 50%;
            transform-origin: left top;
          }
          > div:nth-of-type(1) {
            transform: rotateZ(45deg) translate3d(-50%, -50%, 0);
          }
          > div:nth-of-type(2) {
            transform: rotateZ(-45deg) translate3d(-50%, -50%, 0);
          }
        }
      }
    }
  }
}
